<template>
  <a-card :bordered="false">
    <search ref="search" :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-90"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :toolbar-config="tableToolbar"
        :checkbox-config="checkboxConfig"
        v-bind="vexConfig"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
      >
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button type="primary" @click="handleAdd">新增</a-button>
            <a-button type="primary" @click="batchDel">删除</a-button>
            <a-button type="primary" @click="downExportXls('cnProduct_service' )">导出</a-button>
            <a-button type="primary" :disabled="selectionRows.length!==1" v-has="'business:log'"
                      @click="handleBusiness('接口配置')">日志
            </a-button>
          </div>
        </template>

        <template #detail="{ row,rowIndex }">
          <a @click="handleAdd(row, '详情', true, true)">{{ row.interfaceTag }}</a>
        </template>
        <template #otherSys="{ row,rowIndex }">
          {{ filterDictText(manner, row.otherSys) }}
        </template>
        <template #interfaceDirect="{ row,rowIndex }">
          {{ row.interfaceDirect == 1 ? '平台接口请求外部接口' : '外部接口请求平台接口' }}
        </template>

        <template #status="{ row }">
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event,'post')"/>
        </template>
        <template #action="{ row:record }">
          <a @click='handleAdd(record,"编辑")'>编辑</a>
          <a-divider type="vertical"/>
          <a @click="handleStatistics(record)">统计</a>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <interface-statistics-modal :visible-one.sync="visibleOne" :data="statisticsData"></interface-statistics-modal>
    <business-log ref="businessLog"></business-log>
    <form-add-edit ref="formAdd" @ok="modalFormOk"></form-add-edit>
  </a-card>
</template>

<script>
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'
import { PageListMixin } from '@/mixins/PageListMixin'
import Vue from 'vue'
import { filterObj } from '@/utils/util'
import { getAction, postAction } from '@/api/manage'
import { initDictOptions, filterDictText, filterDictTextByCache } from '@/components/dict/CnDictSelectUtil'
import InterfaceStatisticsModal from '../modules/InterfaceStatisticsModal'

export default {
  name: 'product-list',
  mixins: [PageListMixin],
  components: {
    FormAddEdit,
    InterfaceStatisticsModal
  },
  data() {
    return {
      description: '接口配置',
      visibleOne: false,
      statisticsData: {},
      searchConfig: [
        {
          type: 'input',
          name: 'interfaceTag',
          placeholder: '接口标识'
        },
        {
          type: 'input',
          name: 'accountCode',
          placeholder: '账号'
        },
        {
          type: 'a-select',
          name: 'status',
          placeholder: '状态',
          option: [
            {
              name: '启用',
              value: 1
            },
            {
              name: '停用',
              value: 0
            }
          ]
        }
      ],
      //列定义
      columns: [
        { type: 'checkbox', width: 60, fixed: 'left' },
        {
          fixed: 'left',
          title: '接口标识',
          minWidth: 100,
          field: 'interfaceTag',
          slots: { default: 'detail' }
        },
        {
          title: '接口标题',
          minWidth: 100,
          field: 'interfaceTitle'
        },
        {
          title: '外部系统',
          minWidth: 100,
          field: 'otherSys_dictText',
          slots: { default: 'otherSys' }
        },
        {
          title: '接口方向',
          minWidth: 100,
          field: 'interfaceDirect',
          slots: { default: 'interfaceDirect' }
        },
        {
          title: '接口地址',
          minWidth: 100,
          field: 'interfaceUrl'
        },
        {
          title: '接口描述',
          minWidth: 100,
          field: 'remarks'
        },
        {
          title: '账号',
          minWidth: 100,
          field: 'accountCode'
        },
        {
          title: '创建人',
          field: 'createName',
          minWidth: 80,
        },
        {
          title: '创建时间',
          field: 'createTime',
          minWidth: 80,
        },
        {
          title: '更新人',
          field: 'updateName',
          minWidth: 80,
        },
        {
          title: '更新时间',
          field: 'updateTime',
          minWidth: 80,
        },
        {
          title: '状态',
          field: 'status',
          fixed: 'right',
          minWidth: 100,
          slots: {
            default: 'status'
          }
        },
        {
          title: '操作',
          field: 'action',
          align: 'center',
          fixed: 'right',
          width: 120,
          slots: {
            default: 'action'
          }
        }
      ],
      url: {
        list: window._CONFIG['domianApiURL'] + '/impconfig/cnInterfaceConfig/findPageList',
        delete: window._CONFIG['domianApiURL'] + '/impconfig/cnInterfaceConfig/delete',
        // detail: window._CONFIG['domianApiURL'] + '/impconfig/cnInterfaceConfig/getInfo',
        log: window._CONFIG['domianMqURL'] + '/logApi/getApiShowDetail',
        deleteBatch: window._CONFIG['domianApiURL'] + '/impconfig/cnInterfaceConfig/deleteBatch',
        startOrStopUrl: window._CONFIG['domianApiURL'] + '/impconfig/cnInterfaceConfig/saveOrUpdate'
      }
    }
  },
  created() {
    this.initColumns()
  },
  methods: {
    filterDictText,
    initDictConfig() {
      console.log('--我才是真的方法!--')
      initDictOptions('other_sys').then((res) => {
        if (res.success) {
          this.manner = res.result
        }
      })
    },
    async handleStatistics(row) {
      this.loading = true
      let res =await postAction(this.url.log, { interfaceTag: row.interfaceTag })
      if (res.success) {
        this.statisticsData = res.result||{}
        this.visibleOne = true
      } else {
        this.$message.error(res.message)
      }
      this.loading = false

    },

    async handleAdd(record = {}, title = '新增', disabled = false, disableSubmit = false) {
      if (record.id && this.url.detail) {
        const res = await getAction(this.url.detail, { id: record.id })
        if (res.success) {
          if (res.result) {
            record = res.result
          }
        }
      }
      let config = {
        title: title,
        width: 500,
        addOrUpdateUrl: `${window._CONFIG['domianApiURL']}/impconfig/cnInterfaceConfig/saveOrUpdate`,
        method: 'post',
        list: [
          {
            label: '外部系统',
            type: 'j-select',
            dictCode: 'other_sys',
            placeholder: '外部系统',
            disabled: disabled,
            name: 'otherSys',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '接口标题',
            type: 'input',
            placeholder: '接口标题',
            disabled: disabled,
            name: 'interfaceTitle',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '接口地址',
            type: 'input',
            placeholder: '接口地址',
            disabled: disabled,
            name: 'interfaceUrl',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '接口标识',
            type: 'input',
            disabled: disabled,
            placeholder: '接口标识',
            name: 'interfaceTag',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },
          {
            label: '接口方向',
            type: 'a-select',
            option: [
              {
                name: '平台接口请求外部接口',
                value: '1'
              },
              {
                name: '外部接口请求平台接口',
                value: '2'
              },
            ],
            disabled: disabled,
            placeholder: '接口方向',
            name: 'interfaceDirect',  // 后台接受字段
            check: { rules: [{ required: true, message: '' }] }
          },

          {
            label: '接口描述',
            type: 'input',
            disabled: disabled,
            placeholder: '请输入',
            name: 'remarks'  // 后台接受字段
          },
          {
            label: '账号',
            type: 'input',
            disabled: disabled,
            placeholder: '请输入',
            name: 'accountCode'  // 后台接受字段
          },
          {
            label: '密码',
            type: 'input',
            disabled: disabled,
            placeholder: '请输入',
            name: 'password'  // 后台接受字段
          },
          {
            label: '返回值解析',
            type: 'textarea',
            disabled: disabled,
            placeholder: '请输入',
            name: 'successTag'  // 后台接受字段
          }
        ]
      }
      this.$refs.formAdd.edit(record, config)
      this.$refs.formAdd.disableSubmit = disableSubmit
    }
  }

}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>